<template>
	<view class="right">
		<!-- 用户头像 -->
		<view class="author_img" :class="add_ico ? 'add_author_ico':''" @tap="add_ico = !add_ico;">
			<image :src="item.author_picture"></image>
		</view>
		<!-- 爱心 -->
		<view class="love" @tap="add_love_bg = !add_love_bg;">
			<text class="iconfont iconaixin_shixin" :class="add_love_bg ? 'add_love_bg':''"></text>
			<text>{{item.love_number}}</text>
		</view>
		<!-- 评论 -->
		<view class="comment">
			<text class="iconfont iconw_liuyan"></text>
			<text>{{item.comment_number}}</text>
		</view>
		<!-- 分享 -->
		<view class="share">
			<text class="iconfont iconfenxiang"></text>
			<text>{{item.share_number}}</text>
		</view>
		<!-- 播放 -->
		<view class="play">
			<image src="https://picsum.photos/100/100?random=2"></image>
		</view>
	</view>
</template>

<script>
	export default {
		props: {
			item: {
				type: Object,
				default: {}
			}
		},
		data() {
			return {
				add_ico: false,
				add_love_bg: false,
			};
		},
		onLoad() {},
		methods: {
			// 双击视频了
			dblclick() {
				this.add_love_bg = true;
			},
		},
	}
</script>

<style lang="scss" scoped>
	.right {
		position: absolute;
		bottom: 100rpx;
		right: 25rpx;
		z-index: 20;
		// background-color: green;
		display: grid;
		grid-template-rows: repeat(5, 1fr);
		width: 100rpx;
		height: 680rpx;
		place-items: center center;

		// 图片大小
		image {
			width: 100rpx;
			height: 100rpx;
			border-radius: 50rpx;
		}

		>view {
			display: flex;
			flex-direction: column;
			align-items: center;
			justify-content: center;

			text {
				color: #EEF1F2;

				&:first-of-type {
					font-size: 60rpx;
				}

				&:last-of-type {
					margin-top: 4rpx;
					font-size: 20rpx;
				}
			}
		}

		// 用户头像
		.author_img {
			place-self: start center;
			position: relative;

			image {
				border: 4rpx solid #FFFFFF;
			}

			&::before {
				content: "\e62d";
				width: 36rpx;
				height: 36rpx;
				line-height: 36rpx;
				text-align: center;
				background-color: #FF1B04;
				position: absolute;
				bottom: 0;
				left: 50%;
				transform: translate(-50%, 50%);
				font-family: "iconfont" !important;
				font-size: 20rpx;
				z-index: 21;
				border-radius: 50%;
				color: #FFFFFF;
				opacity: 0;
				transition: .35s all linear .1s;
			}
		}

		// 爱心
		.love {}

		// 评论
		.comment {}

		// 分享
		.share {}

		// 播放
		.play {
			place-self: center center;
			position: relative;

			>image {
				width: 100rpx;
				height: 100rpx;
			}

			&::before {
				content: "";
				position: absolute;
				bottom: 50%;
				left: 50%;
				width: 120rpx;
				height: 120rpx;
				background: transparent url("https://s2.music.126.net/style/web2/img/ie6/singlecover.png?ed298a1b4470ff037802ae7f1e5cfe24") no-repeat scroll center center;
				background-size: cover;
				filter: blur(1rpx);
				z-index: 21;
				border-radius: 50%;
				border: 1rpx solid #FFFFFF;
				animation: rotate 1.5s linear 0.2s infinite;
			}
		}
	}

	@keyframes rotate {
		0% {
			transform: translate(-50%, 50%) rotate(0deg);
		}

		100% {
			transform: translate(-50%, 50%) rotate(360deg);
		}
	}

	// 添加红色的小加号
	.add_author_ico {
		&::before {
			opacity: 1 !important;
		}
	}

	// 给爱心添加过渡效果
	.iconaixin_shixin {
		transition: .25s color linear .1s;
	}

	// 添加红色的背景爱心
	.add_love_bg {
		color: #FF1A00 !important;
		// 添加动画效果
		animation: jello;
		animation-duration: .25s;
	}
</style>
